import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import styles from './style/index.less';
import Tab from './components/Tab';
import Echart from './components/Echart';
import Table from './components/Table';


@connect(({ engineerManagement }) => ({
  tabModule: engineerManagement.tabModule,
  echartsModule: engineerManagement.echartsModule,
  tableModule: engineerManagement.tableModule,

}))
class EngineerManagement extends Component {
  componentDidMount() {
    this.initAllData();
  }

  // 获取页面数据
  initAllData = () => {
    this.props.dispatch({
      type: 'engineerManagement/fetchData',
      payload: {}
    });
  }

  render() {
    const { tabModule, echartsModule, tableModule } = this.props;
    return (
      <div className={styles.container}>
        {/* 标题 */}
        <Row>
          <Col span={24} className={styles.engManage_title}>工程管理</Col>
        </Row>
        {/* Tap栏 */}
        <Row>
          {tabModule.map(item => <Tab key={item.name} {...item} />)}
        </Row>
        {/* Echarts图  */}
        <Row>
          {echartsModule.map(item => <Echart key={item.name} {...item} />)}
        </Row>
        {/* Table表格 */}
        <Row>
          {<Table tableModule={tableModule} />}
        </Row>
      </div>
    );
  }
}

export default EngineerManagement;
